<template>
  <div class="monitor">
    <treeInfo @getOrgizationInfo="getOrgizationInfo" />
    <el-card style="margin:12px;flex:1;">
      <div style="width: 50vw;height: 700px; overflow: auto;margin:0 auto">
        <video
          id="myVideo"
          ref="videoRef"
          class="video-js"
          style="width:100%; height: 100%;"
        >
          <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">
              supports HTML5 video
            </a>
          </p>
        </video>
      </div>
    </el-card>
  </div>
</template>

<script>
import treeInfo from '@/components/treeInfo'
import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
export default {
  components: {
    treeInfo
  },
  data() {
    return {
      list: [
        'https://gcalic.v.myalicdn.com/gc/wgw05_1/index.m3u8?contentid=2820180516001',
        'https://gccncc.v.wscdns.com/gc/yxlcyt_1/index.m3u8?contentid=2820180516001',
        'https://gccncc.v.wscdns.com/gc/wygjt2_1/index.m3u8?contentid=2820180516001',
        'https://gccncc.v.wscdns.com/gc/hsgmd_1/index.m3u8?contentid=2820180516001',
        'https://gccncc.v.wscdns.com/gc/ytszyf_1/index.m3u8?contentid=2820180516001',
        'https://gccncc.v.wscdns.com/gc/ytszyf_1/index.m3u8?contentid=2820180516001',
        'https://gcalic.v.myalicdn.com/gc/mdjxxdsb_1/index.m3u8?contentid=2820180516001'
      ],
      item: 0
    }
  },
  mounted() {
    this.initVideo()
  },
  methods: {
    getOrgizationInfo(nodekey) {
      // console.log(nodekey)
      this.item = Math.floor(Math.random() * this.list.length)
      this.initVideo()
    },
    initVideo() {
      videojs(this.$refs.videoRef, {
      // // 宽度
      // width: 400,
      // autoplay含义：是否自动播放
        autoplay: true,
        // controls含义：是否显示控制条
        controls: true,
        // preload含义：是否预加载
        preload: 'auto',
        // fluid含义：自适应宽高
        fluid: true,
        // liveUi含义：直播UI
        liveui: true,
        // sources含义：视频源
        sources: [{
        // src含义：视频地址
          src: this.list[this.item]
        // type: 'application/x-mpegURL'
        }]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.monitor{
  display: flex;
}
</style>
